<!--卡片-->
<template>
	<el-card :class="mode!='default'?['zh-card-' + globalComponentSize, 'zh-card-' + mode]:['zh-card-' + globalComponentSize, 'zh-card-defaultCS']" :body-style="bodyStyle" :shadow="shadow">
		<template #header v-if="title">
			<slot name="header" >
				<div class="card-header" >
					<span style="font-weight: 500" :style="{ fontSize: fontSize }">{{ title }}</span>
					<div class="card-header-button" >
					<slot name="headerRight"></slot>
					</div>
				</div>
			</slot>
		</template>

		<slot />
	</el-card>
</template>
<script lang="ts" setup>
// 定义属性
defineProps({
	title: {
		type: String,
		default: '',
	},
	//设置阴影显示时机 always / hover / never
	shadow: {
		type: String,
		default: 'hover',
	},
	bodyStyle: {
		type: Object,
	},
	mode: {
		type: String,
		default: 'primary-light',
	},
});
const fontSize = ref('14px');
const globalComponentSize = ref($store.theme.globalComponentSize);
onMounted(() => {
	if (globalComponentSize.value === 'small') {
		fontSize.value = '12px';
	} else if (globalComponentSize.value === 'default') {
		fontSize.value = '14px';
	} else {
		fontSize.value = '16px';
	}
});
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-card',
	inheritAttrs: false,
};
</script>
<style lang="scss" scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-header-button{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.zh-card-small.zh-card-primary-light {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary-light-9);
		color: var(--el-color-primary);
	}
}
.zh-card-default.zh-card-primary-light {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary-light-9);
		color: var(--el-color-primary);
	}
}
.zh-card-large.zh-card-primary-light {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary-light-9);
		color: var(--el-color-primary);
	}
}
.zh-card-small.zh-card-primary {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary);
		color: #fff;
	}
}
.zh-card-default.zh-card-primary {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary);
		color: #fff;
	}
}
.zh-card-large.zh-card-primary {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
		background-color: var(--el-color-primary);
		color: #fff;
	}
}
.zh-card-small.zh-card-defaultCS {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
	}
}
.zh-card-default.zh-card-defaultCS {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
	}
}
.zh-card-large.zh-card-defaultCS {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
	}
}
.zh-card-small.zh-card-success {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
		background-color: var(--el-color-success);
		color: #fff;
	}
}
.zh-card-default.zh-card-success {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
		background-color: var(--el-color-success);
		color: #fff;
	}
}
.zh-card-large.zh-card-success {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
		background-color: var(--el-color-success);
		color: #fff;
	}
}
.zh-card-small.zh-card-warning {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
		background-color: var(--el-color-warning);
		color: #fff;
	}
}
.zh-card-default.zh-card-warning {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
		background-color: var(--el-color-warning);
		color: #fff;
	}
}
.zh-card-large.zh-card-warning {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
		background-color: var(--el-color-warning);
		color: #fff;
	}
}
.zh-card-small.zh-card-danger {
	:deep(.el-card__header) {
		height: 35px;
		line-height: 35px;
		padding: 0px 20px !important;
		background-color: var(--el-color-danger);
		color: #fff;
	}
}
.zh-card-default.zh-card-danger {
	:deep(.el-card__header) {
		height: 45px;
		line-height: 45px;
		padding: 0px 20px !important;
		background-color: var(--el-color-danger);
		color: #fff;
	}
}
.zh-card-large.zh-card-danger {
	:deep(.el-card__header) {
		height: 55px;
		line-height: 55px;
		padding: 0px 20px !important;
		background-color: var(--el-color-danger);
		color: #fff;
	}
}
</style>
